app.views.ListManageView = Ext.extend(Ext.form.FormPanel, {
	dockedItems: [{
		title: 'Check Lists',
		xtype: 'toolbar',
		items: [
			
			{
				text : 'back',
				ui: 'back',
				listeners: {
					'tap': function() {
						Ext.dispatch({
							controller: app.controllers.ListController,
							action: 'cancelCreate',
							animation: {type: 'slide', direction: 'right'}
						});
					}
				}
			},
			
			{xtype: 'spacer'},
			
			{
				text : 'save',
				iconMask: true,
				listeners: {
					'tap': function() {
						
						var liName = app.views.ListManageView.getValues().listName;
						
						var curRecrd = app.views.ListManageView.record;
						
						var oldName = curRecrd.get('listName');
						
						if (liName && oldName != liName) {
							
							// console.log('old name is "' + oldName + '" new name is "' + liName + '"' );
							
							var liId = curRecrd.get('id');
							
							curRecrd.set('listName', liName);
																						
							var rcds = [];
							rcds.push(curRecrd);
								
							var operation = new Ext.data.Operation({
								action: 'updateListName',
								records: rcds
							});
								
							var theProxy = app.stores.checkLists.getProxy();
								
							theProxy.update(operation, app.views.ListManageView.updateWithRecord, app.views.ListManageView);

																				
						}
											
						
					}
				}
			}
			
		]
		
	},
	
	{
		dock : 'bottom',
		xtype: 'toolbar',
		ui   : 'light',
		items: [
			
			{
				iconCls: 'trash',
				iconMask: true,
				ui: 'plain',
				text: 'delete',
				
				listeners: {
					'tap': function() {
					
						var irv = app.views.ListManageView.record;
						
						var rcds = [];
						rcds.push(irv);
										
						var operation = new Ext.data.Operation({
							action: 'remove',
							records : rcds
						});
					
						theProxy = app.stores.checkLists.getProxy();
					
						theProxy.destroy(operation, null, null);
						
						app.stores.checkLists.load();
						
						Ext.dispatch({
							controller: app.controllers.ListController,
							action: 'cancelCreate',
							animation: {type: 'slide', direction: 'right'}
						});
					}
				}
				
			},
			
			{
				iconCls: 'cloud_black_upload1',
				iconMask: true,
				ui: 'plain',
				text: 'server sync',
				listeners: {
					'tap': function() {
						/*
						Ext.dispatch({
							controller: app.controllers.ListController,
							action: 'createNewList',
							animation: {type: 'slide', direction: 'left'}
						});
						*/
					}
				}
			}
		]
	}],
	
	submitOnAction: false,
	
	items: [
		{
			name: 'listName',
			label: 'Name',
			xtype: 'textfield'
		}
			
	],

	
	/*
	items: [{
		xtype: 'list',
		store: app.stores.checkLists,
		// itemTpl: new Ext.Button(text: "delete")
		// itemTpl: [new Ext.XTemplate({xtype: "button", text: "delete"} ), {listName}]
		itemTpl: '<input id="delbtn_{id}" type="button" value="delete"/> {listName}',
		
		listeners: {
			el: {
				tap: function(event) {
					var tar_id = event.target.id;
					var itemId = tar_id.substring(tar_id.lastIndexOf('_') + 1);
					console.log('button click detected: ' + itemId);
					
					//var irv = app.stores.checkLists.find('id', itemId);
					var irv = app.stores.checkLists.getById(itemId);
					
					console.log(irv.get('listName'));
					
					var rcds = [];
					rcds.push(irv);
					
					// app.stores.checkLists.remove(irv);
					
					var operation = new Ext.data.Operation({
						action: 'remove',
						records : rcds
					});
					
					theProxy = app.stores.checkLists.getProxy();
					
					theProxy.destroy(operation, null, null);
					
					app.stores.checkLists.load();
					
					//app.stores.checkLists.sync();
					
				},
				delegate: 'input[type=button]'
			}
		}
		
	}],
	*/
	
			
	updateWithRecord: function(record) {
		
		// console.log(this);
		
		var toolbar = this.getDockedItems()[0];
		toolbar.setTitle(record.get('listName'));
		
		this.setValues({listName: record.get('listName')});
		
		this.record = record;
	}
	
});


